<template>
    <div>
        <div
            class="note-button"
            @click="clickNote"
            @mouseenter="enter($event)"
            @mouseleave="leave($event)"
        >
            <i class="iconfont icon-biji"></i>
        </div>
        <NoteInfo :isNoteShow="isNoteShow" @updateNote="updateNote"></NoteInfo>
    </div>
</template>

<script>
import $ from 'jquery'
import NoteInfo from './NoteInfo.vue'
export default {
    name: 'NoteButtonInfo',
    components: {
        NoteInfo
    },
    data() {
        return {
            isNoteShow: false
        }
    },
    methods: {
        clickNote() {
            var self = this
            $(this).animate({
                right: '-60px'
            })
            self.isNoteShow = true
        },
        updateNote(state) {
            this.isNoteShow = state
        },
        enter(e) {
            $(e.target).animate({
                right: 0
            })
        },
        leave(e) {
            $(e.target).animate({
                right: '-60px'
            })
        }
    },
    mounted() {}
}
</script>

<style lang="less">
.note-button {
    width: 74px;
    height: 48px;
    box-shadow: 0 0 2px #5b00ff;
    position: fixed;
    right: -60px;
    top: 50%;
    background: #ffcb00c7;
    z-index: 11;
}
.note-button > i {
    display: block;
    margin: 14px 20px;
    font-size: 20px;
    color: white;
}
</style>
